
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:import url="../cabecalho.jsp" />
<c:import url="../menu.jsp" />
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
	<div class="row">
		<ol class="breadcrumb">
			<li>
				<a href="#">
					<span class="glyphicon glyphicon-home"></span>
				</a>
			</li>
			<li class="active">
				<fmt:message key="entrada.reparo" />
			</li>
		</ol>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">
				<fmt:message key="entrada.reparo" />
			</h1>
		</div>
	</div>
	<form:form id="formReparo" method="post" commandName="reparoOem">
		<form:input path="id" type="hidden" />
		<form:input path="veiculo.id" type="hidden" />
		<form:input path="produto.id" type="hidden" />
		<div class="row">
			<div class="col-lg-10 col-md-10">
				<div class="panel panel-default">
					<!--######################## MENSAGENS ########################-->
					<c:if test="${not empty msg && msg.tipo eq 'sucesso'}">
						<div class="alert alert-success" role="alert">
							<fmt:message key="${msg.texto}" />
						</div>
					</c:if>
					<c:if test="${not empty msg && msg.tipo eq 'erro'}">
						<div class="alert alert-danger" role="alert">
							<b>
								<fmt:message key="${msg.texto}">
									<br>
								</fmt:message>
							</b>
							<form:errors path="produto.dadosBasicos.modelo" cssStyle="color:black; display: block;" />
							<form:errors path="produto.numeroDeSerie" cssStyle="color:black; display: block;" />
							<form:errors path="numeroDaOrdemDeServico" cssStyle="color:black; display: block;" />
							<form:errors path="produto.numeroDaNotaFiscal" cssStyle="color:black; display: block;" />
						</div>
					</c:if>
					<div class="panel-heading cab">
						<span class="togglePioneer aberto glyphicon glyphicon-minus" aria-hidden="true"></span>
						<fmt:message key="entrada.reparo.dadosaparelho" />
					</div>
					<div class="panel-body">
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-3 col-lg-3">
								<form:label path="dataDeEntrada">
									<fmt:message key="entrada.reparo.dataentrada" />
								</form:label>
								<fmt:formatDate value="${dataEntrada.time}" pattern="dd/MM/yyyy" var="dataFormatada" />
								<form:input cssClass="form-control datepicker" path="dataDeEntrada" name="dataDeEntrada" value="${dataFormatada}" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group  col-md-3 col-lg-3">
								<form:label path="produto.dataDaCompra">
									<fmt:message key="datacompra" />
								</form:label>
								<form:input path="produto.dataDaCompra" cssClass="form-control datepicker" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-6 col-lg-6">
								<form:label path="produto.dadosBasicos.modelo">
									<fmt:message key="modelo" />
								</form:label>
								<form:select path="produto.dadosBasicos.modelo" cssClass="form-control required" disabled="${statusToggle == 'aberto' ? false : true}">
									<form:option path="produto.dadosBasicos.modelo" value=""></form:option>
									<c:forEach items="${dadosBasicos}" var="dadoBasico">
										<form:option path="produto.dadosBasicos.modelo" value="${dadoBasico.modelo}">${dadoBasico.modelo}</form:option>
									</c:forEach>
								</form:select>
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-6 col-lg-8">
								<form:label path="produto.localDaCompra">
									<fmt:message key="localcompra" />
								</form:label>
								<form:input path="produto.localDaCompra" name="localDaCompra" cssClass="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-4 col-lg-4">
								<form:label path="produto.numeroDeSerie">
									<fmt:message key="numeroserie" />
								</form:label>
								<form:input path="produto.numeroDeSerie" name="produto.numeroDeSerie" cssClass="form-control required" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-12 col-lg-12">
								<form:label path="descricaoDoDefeito">
									<fmt:message key="descricaodefeito" />
								</form:label>
								<form:textarea path="descricaoDoDefeito" name="descricaoDoDefeito" cssClass="form-control" rows="8" readonly="${statusToggle == 'aberto' ? false : true}"></form:textarea>
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-6 col-lg-8">
								<form:label path="numeroDaOrdemDeServico">
									<fmt:message key="ordemservico" />
								</form:label>
								<form:input path="numeroDaOrdemDeServico" name="numeroDaOrdemDeServico" cssClass="form-control required" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-4 col-lg-4">
								<form:label path="produto.numeroDaNotaFiscal">
									<fmt:message key="notafiscal" />
								</form:label>
								<form:input path="produto.numeroDaNotaFiscal" name="produto.numeroDaNotaFiscal" cssClass="form-control required" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-12 col-lg-12">
								<label for="acessoriosAcompanhados">
									<fmt:message key="acompanhamento.do.produto" />
								</label>
								<form:textarea path="acessoriosAcompanhados" id="acessoriosAcompanhados" name="acessoriosAcompanhados" class="form-control" rows="4" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-12 col-lg-12">
								<label for="produto.estadoDeConservacao">
									<fmt:message key="estado.do.produto" />
								</label>
								<form:textarea path="produto.estadoDeConservacao" id="produto.estadoDeConservacao" name="produto.estadoDeConservacao" class="form-control" rows="4" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
						</div>
					</div>
					<div class="panel-heading cab">
						<span class="togglePioneer aberto glyphicon glyphicon-minus" aria-hidden="true"></span>
						<fmt:message key="entrada.reparo.dadosveiculo" />
					</div>
					<div class="panel-body">
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-8 col-lg-8">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.chassi" />
								</label>
								<form:input path="veiculo.chassi" name="veiculo.chassi" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group  col-md-4 col-lg-4">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.modelo" />
								</label>
								<form:input path="veiculo.modeloDoVeiculo" name="veiculo.modeloDoVeiculo" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-3 col-lg-3">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.quilometragem" />
								</label>
								<form:input path="veiculo.quilometragem" name="veiculo.quilometragem" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-3 col-lg-3">
								<label>
									<fmt:message key="datadeentrega" />
								</label>
								<fmt:formatDate value="${veiculo.dataDeEntrega.time}" pattern="dd/MM/yyyy" var="dataFormatada" />
								<form:input path="veiculo.dataDeEntrega" name="veiculo.dataDeEntrega" class="form-control datepicker" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-6 col-lg-6">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.versaomapa" />
								</label>
								<form:input path="veiculo.versaoDoMapa" name="veiculo.versaoDoMapa" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-3 col-lg-3">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.versaonavegador" />
								</label>
								<form:input path="veiculo.versaoDoNavegador" name="veiculo.versaoDoNavegador" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-3 col-lg-3">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.versaocddb" />
								</label>
								<form:input path="veiculo.versaoDoCddb" name="veiculo.versaoDoCddb" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
							<div class="form-group col-md-6 col-lg-6">
								<label>
									<fmt:message key="entrada.reparo.dadosveiculo.outrasversoes" />
								</label>
								<form:input path="veiculo.outrasVersoes" name="veiculo.outrasVersoes" class="form-control" readonly="${statusToggle == 'aberto' ? false : true}" />
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-12 col-lg-12">
								<div class="checkbox">
									<form:checkbox path="veiculo.autorizacaoReparoComPerda" disabled="${statusToggle == 'aberto' ? false : true}" />
									<label for="veiculo.autorizacaoReparoComPerda1">
										<fmt:message key="entrada.reparo.dadosveiculo.autorizacaoperdadememoria" />
									</label>
								</div>
							</div>
						</div>
						<div class="col-md-12 col-lg-12">
							<div class="form-group col-md-12 col-lg-12">
								<div class="checkbox">
									<form:checkbox path="veiculo.sintomaVerificadoPeloConcessionario" disabled="${statusToggle == 'aberto' ? false : true}" />
									<label for="veiculo.sintomaVerificadoPeloConcessionario1">
										<fmt:message key="entrada.reparo.dadosveiculo.sintomaverificado" />
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="panel-heading cab">
						<span class="togglePioneer aberto glyphicon glyphicon-minus" aria-hidden="true"></span>
						<fmt:message key="entrada.reparo.dadosaparelho.detalhes.defeitos" />
					</div>
					<div class="panel-body">
						<div id="msgAjaxDefeitos" style="display: none" class="alert alert-danger" role="alert"></div>
						<fieldset>
							<div class="form-group col-md-9 col-lg-9">
								<label for="funcao">
									<fmt:message key="funcao" />
								</label>
								<input id="funcao" type="text" class="form-control" />
							</div>
							<div class="form-group col-md-9 col-lg-9">
								<label for="sintoma">
									<fmt:message key="sintoma" />
								</label>
								<input id="sintoma" type="text" class="form-control" />
							</div>
							<div class="form-group col-md-12 col-lg-12">
								<label for="comentario">
									<fmt:message key="comentario.funcao" />
								</label>
								<textarea id="comentario" class="form-control" rows="8"></textarea>
							</div>
							<br>
							<div class="col-lg-12">
								<table class="table table-hover" id="tabelaDetalhes">
									<thead>
										<tr id="header"></tr>
									<thead>
										<c:if test="${not empty reparoOem.detalheDefeitoDoReparoOem.detalheDefeitos}">
											<tr id="header_">
												<th>
													<fmt:message key="funcao" />
												</th>
												<th>
													<fmt:message key="descricao.defeito" />
												</th>
												<th>
													<fmt:message key="codigo.sintoma" />
												</th>
												<th>
													<fmt:message key="descricao.sintoma" />
												</th>
												<th>
													<fmt:message key="comentario.funcao" />
												</th>
												<th>
												</th>
											</tr>
											<c:forEach items="${reparoOem.detalheDefeitoDoReparoOem.detalheDefeitos}" var="detalheDefeitoDoReparoOem" varStatus="loop">
												<tr id="tr_${loop.index}">
													<td id="td_codFuncao_${loop.index}">${detalheDefeitoDoReparoOem.codigoFuncao}</td>
													<td id="td_funcao_${loop.index}">${detalheDefeitoDoReparoOem.funcao}</td>
													<td id="td_codSintoma_${loop.index}">${detalheDefeitoDoReparoOem.codigoSintoma}</td>
													<td id="td_sintoma_${loop.index}">${detalheDefeitoDoReparoOem.sintoma}</td>
													<c:set var="comment" value="${detalheDefeitoDoReparoOem.comentario}" />
													<td>
														<a href="#" data-toggle="modal" data-target="#comentarioModal" data-whatever="${detalheDefeitoDoReparoOem.comentario}">${fn:substring(comment, 0, 10)} ...</a>
													</td>
													<td>
													</td>
												</tr>
											</c:forEach>
										</c:if>
								</table>
							</div>
						</fieldset>
					</div>
					
					<!--############################# REPROVACAO DO REPARO ###############################-->
					<c:if test="${reparoOem.status == 'REPROVADO'}">
						<div class="panel-heading cab">
							<fmt:message key="motivo.reprovacao" />
							<span class="togglePioneer aberto glyphicon glyphicon-minus" aria-hidden="true"></span>
						</div>
						<div class="panel-body">
							<div class="panel panel-default">
								<div class="col-md-12 col-lg-12">
									<form:label path="motivoReprovacao">
										<fmt:message key="motivo.reprovacao" />
									</form:label>
									<form:textarea path="motivoReprovacao" class="form-control" disabled="true" />
								</div>
							</div>
						</div>
					</c:if>
					
					<!--#################################### BOTOES ################################-->
					<div class="panel-body">
						<div class="col-md-12 col-lg-12">
							<c:if test="${reparoOem.status == 'AGUARDANDO_APROVACAO'}">
								<div class="form-group col-md-10 col-lg-10">
									<button type="button" data-toggle="modal" data-target="#reprovavacaoModal" id="bt_reprovarReparo" class="btn btn-danger direita">
										<fmt:message key="reprovarreparo" />
									</button>
								</div>
								<div class="form-group col-md-2 col-lg-2">
									<button id="bt_aprovarReparo" class="btn btn-success direita">
										<fmt:message key="aprovarreparo" />
									</button>
								</div>
							</c:if>
						</div>
					</div>
					<form:input type="hidden" path="status" value="${reparoOem.status}" />
					<input type="hidden" name="temErroForm" id="temErroForm" value="${not empty msg && msg.tipo eq 'erro' ? 'sim' : 'nao'}" />
				</div>
			</div>
		</div>
	</form:form>
</div>
<!-- ############## MODAL DE REPROVACAO ###################### -->
<div class="modal fade" id="reprovavacaoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="exampleModalLabel">
					<fmt:message key="motivo.reprovacao" />
				</h4>
			</div>
			<form id="form_reprovarReparo">
				<div class="modal-body">
					<textarea class="form-control" rows="5" name="motivoReprovacao"></textarea>
				</div>
				<div class="modal-footer">
					<button  type="button" id="bt_enviarReprovacao" class="btn btn-success" data-dismiss="modal">
						<fmt:message key="enviar" />
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<fmt:message key="fechar" />
					</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- ############## MODAL DE COMENTARIO ###################### -->
<div class="modal fade" id="comentarioModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="exampleModalLabel">
					<fmt:message key="dados.fechamento.pedidoemgarantia.descricaododefeito.comentario" />
				</h4>
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
					<fmt:message key="fechar" />
				</button>
			</div>
		</div>
	</div>
</div>

<script>

	$("#bt_aprovarReparo").click(function() {
		$("#formReparo").attr("action", "aprovarReparoOemAdmin");
		$("#formReparo").submit();
	});
	
	$("#bt_enviarReprovacao").click(function() {
		$("#form_reprovarReparo").attr("action", "reprovarReparoOem");
		$("#form_reprovarReparo").submit();
	});

	$(".fechado").each(function() {
		$(this).parent().next().toggle();
		$(this).removeClass();
		$(this).addClass("togglePioneer fechado glyphicon glyphicon-plus");
	});

	$(".togglePioneer").click(function() {
		$(this).parent().next().toggle("slow");
		if ($(this).hasClass("aberto")) {
			$(this).removeClass();
			$(this).addClass("togglePioneer fechado glyphicon glyphicon-plus");
		} else {
			$(this).removeClass();
			$(this).addClass("togglePioneer aberto glyphicon glyphicon-minus");
		}

	});

	
	$('#comentarioModal').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget) // Button that triggered the modal
		var recipient = button.data('whatever') // Extract info from data-* attributes
		var modal = $(this)
		$('#comentarioModal .modal-body').text(recipient);
	});
</script>
<c:import url="../rodape.jsp" />
